<template>
  <div class="con">
    <!-- <template v-if="isDev">
      &nbsp;<b>{{ msgType }}</b>
      &nbsp;<u>{{ 'serverUrl:' + serverUrl }}</u>
      &nbsp;<u>{{ 'qiniuaddr:' + qiniuaddr }}</u>
    </template> -->

    <template v-if="msgType == 'text' ">
      <quill-editor v-model="pDraft.text" style="height:100%;"
        ref="myQuillEditor" :options="quillEditorOption"
        ></quill-editor>
    </template>

    <template v-if="(msgType == 'mpnews')">
      <span v-if="pDraft.mpnews.articles.length == 0">从素材库选择</span>
      <EditMpnewsMolle v-else></EditMpnewsMolle>
    </template>

    <template v-if="msgType == 'image'">
      <template v-if="Boolean(pDraft.image.imgUrl)">
        <div class="img-box wx_image">
          <el-image fit="contain" :src="pDraft.image.imgUrl" :preview-src-list="[pDraft.image.imgUrl]">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
        <el-button type="text" @click="clearDraft('image')">删除</el-button>
      </template>
      <template v-else>
        <el-upload accept=".jpg,.png.,.gif"
          :action="serverUrl"
          :data="fileUpload"
          :show-file-list="false"
          :before-upload="(file)=>{return uploadBefore(file,'image')}"
          :on-success="(response,res,fileList,type)=>{return uploadSuccess(response,res,fileList,'image')}"
          :on-error="(err, file, fileList)=>{return uploadError(err, file, fileList,'image')}"
          >
          <div slot="default" class="upload-btn">
            <i class="el-icon-plus"></i>
          </div>
        </el-upload>
      </template>
    </template>
    <!-- image -->

    <template v-if="msgType == 'video'">
      <template v-if="Boolean(pDraft.video.fileUrl)">
        <div class="img-box wx_video">
          <video class="video-inline" :src="pDraft.video.fileUrl" controls></video>
        </div>
        <el-button type="text" @click="clearDraft('video')">删除</el-button>
      </template>
      <template v-else>
        <el-upload accept=".mp4"
          :action="serverUrl"
          :data="fileUpload"
          :show-file-list="false"
          :before-upload="(file)=>{return uploadBefore(file,'video')}"
          :on-success="(response,res,fileList,type)=>{return uploadSuccess(response,res,fileList,'video')}"
          :on-error="(err, file, fileList)=>{return uploadError(err, file, fileList,'video')}"
          >
          <div slot="default" class="upload-btn">
            <i class="el-icon-plus"></i>
          </div>
        </el-upload>
      </template>
    </template>
    <!-- video -->

    <template v-if="msgType == 'file'">
      <template v-if="Boolean(pDraft.file.fileUrl)">
        <div class="dis-ib wx_file">
          <a :download="pDraft.file.fileUrl" :href="pDraft.file.fileUrl" target="_blank">
            <div class="text-overflow title">{{ pDraft.file.name }}</div>
          </a>
          <i class="fa fa-fw fa-file"></i>
        </div>
        <el-button type="text" @click="clearDraft('file')">删除</el-button>
      </template>
      <template v-else>
        <el-upload
          :action="serverUrl"
          :data="fileUpload"
          :show-file-list="false"
          :before-upload="(file)=>{return uploadBefore(file,'file')}"
          :on-success="(response,res,fileList,type)=>{return uploadSuccess(response,res,fileList,'file')}"
          :on-error="(err, file, fileList)=>{return uploadError(err, file, fileList,'file')}"
          >
          <div slot="default" class="upload-btn">
            <i class="el-icon-plus"></i>
          </div>
        </el-upload>
      </template>
    </template>
    <!-- file -->


  </div>
</template>

<script>
import { emoji,ruleStr,emojiReplace,ruleImg,imgReplaceEmoji } from '../../assets/emoticon.js';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
import { mapState, mapMutations } from 'vuex';
export default {
  components:{
    EditMpnewsMolle: ()=>{ return import('./editMpnews.vue') },
    quillEditor,
  },
  computed:{...mapState([]),},
  props:{msgType:String},
  // inheritAttrs:false,
  inject: [
    'pDraft','serverUrl','qiniuaddr'
  ],
  data(){
    return {
      isDev:process.env.NODE_ENV == 'development',
      editorOption:{},
      quillEditorOption:{
        modules:{
          toolbar: null,
        },
      },
      ImageUpload:{},
      fileUpload: { //上传额外参数
        file: null,
        token:''
      },
    }
  },
  watch:{},
  methods:{
    addEmoji:function(objEmoji){
      // 1.获取到富文本装着数据的对象
      let quill = this.$refs.myQuillEditor.quill
      // 2.获取光标所在的位置quill.selection.savedRange.index
      quill.insertEmbed(quill.selection.savedRange.index,'image', objEmoji.src)
      // 3.把图片插到光标的地方(第三个参数是图片的url)quill.insertEmbed(length, 'image', v.imgurl)
      quill.formatText(quill.selection.savedRange.index,1,{"alt": objEmoji.txt});
      // 4.把光标移到图片的后面
      quill.setSelection(quill.selection.savedRange.index + 1)
    },
    uploadBefore:function(file,type){
      let typeObj = (function(){
        return {
          image:{txt:'图片',arr:["image/png","image/jpeg"],sizeMax:1024 * 1024 * 10},
          video:{txt:'视频',arr:["video/mp4"],sizeMax:1024 * 1024 * 10},
          file:{txt:'文件',arr:[],sizeMax:1024 * 1024 * 10}
        }[type]
      })(type)
      if(typeObj.arr.length > 0 && !typeObj.arr.includes(file.type)){
        this.$message({
          message: '文件的格式不正确,请上传正确文件',
          type: 'warning'
        });
        return false;
      }
      if(file.size > typeObj.sizeMax){
        this.$message({
          message: '上传的文件过大',
          type: 'warning'
        });
        return false;
      }
      this.fileUpload.file = file;
      return this.$api.getQiniuToken().then(res=>{
        this.fileUpload.token = res.data.data;
      })
    },
    uploadSuccess:function(response,res,fileList,type){
      if(type == 'image'){
        this.pDraft.image.name = res.name;
        this.pDraft.image.imgUrl = `${this.qiniuaddr}/${response.key}`;
      }
      if(type == "video"){
        this.pDraft.video.name = res.name;
        this.pDraft.video.fileUrl = `${this.qiniuaddr}/${response.key}`;
      }
      if(type == "file"){
        this.pDraft.file.name = res.name;
        this.pDraft.file.fileUrl = `${this.qiniuaddr}/${response.key}`;
      }
    },
    uploadError:function(err, file, fileList,type){
      console.log('%c [ err, file, fileList ]', 'font-size:13px; background:pink; color:#bf2c9f;', err, file, fileList,type)
      this.$message.error('文件上传失败')
    },
    clearDraft:function(type){
      switch (type){
        case "text":
          this.pDraft.text = '';
          break;
        case "image":
          this.pDraft.image.media_id = null;
          this.pDraft.image.imgUrl = '';
          break;
        case "video":
          this.pDraft.video.media_id = null;
          this.pDraft.video.imgUrl = '';
          this.pDraft.video.fileUrl = '';
          break;
        case "file":
          this.pDraft.file.media_id = null;
          this.pDraft.file.fileUrl = '';
          break;
        case "mpnews":
          this.pDraft.mpnews = {id:'',articles:[]};
          break;
        default:
          return
      }

    },
  }
}
</script>

<style lang="less" scoped>
.con{
  position: absolute;
  top:0;bottom:0;
  left:0;right:0;
  overflow: auto;
}

.upload-btn{
  text-align: center;
  line-height:100px;
  width:100px;height:100px;
  margin:10px;
  border:1px dashed #999;
}
.wx_image,.wx_video,.wx_file{
  margin:10px;
}
.wx_image{
  position: relative;
  max-width:100%;
}
.wx_video{
  position: relative;
  display: inline-block;
  min-width:200px;
  max-width:260px;
  min-height:114px;
  background-color:#000;
}
.video-icon{
  position: absolute;
  top:0;bottom:0;left:0;right:0;
  font-size: 48px;;
  width:48px;height:48px;
  margin:auto;
  color:#fff;
}
.wx_file{
  font-size:16px;
  height:56px;
  width: 260px;
  padding:12px 40px 12px 16px;
  background-color:#fff;
  color:#333;
  .fa{
    font: 32px;
    line-height:56px;
    position: absolute;
    top:0;bottom:0;right:16px;
    margin:auto;
  }
}
</style>
